<template>
	<div>
		<el-dialog
			:title="title"
			:visible.sync="dialogVisible"
			:close-on-click-modal="false"
			width="1200px"
			v-dialogDrag="true"
		>
			<el-form :model="form" :disabled="status == '3'" :rules="rules" ref="form" size="small" label-width="120px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="单位编号" prop="unitNumber">
							<el-input
								v-model="form.unitNumber"
								placeholder="请输入"
								clearable
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="用人单位" prop="organizationName">
              <el-input
                v-if="!hasQCCheck"
								v-model="form.organizationName"
								placeholder="请输入"
								clearable
							>
                <el-button slot="append" @click="triggerRemoteSearch"><svg-icon icon-class="qcc" class="qcc" /></el-button>
              </el-input>
              <el-select
                v-else
                ref="companySelect"
                v-model="form.companyNo"
                clearable
                filterable
                placeholder="请输入"
                @change="handleOrganizationChange"
                style="width: 100%"
              >
                <el-option
                  v-for="item in organizationOptions"
                  :key="item.keyNo"
                  :label="item.name"
                  :value="item.keyNo">
                </el-option>
              </el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="委托单位">
							<el-input
								v-model="form.delegationOrganizationName"
								placeholder="请输入"
								clearable
							/>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8">
						<el-form-item label="法定代表人">
							<el-input
								v-model="form.legalRepresentative"
								:placeholder="status != '3' ? '请输入' : ''"
								clearable
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="授权代表人">
							<el-input
								v-model="form.authorizedPerson"
								:placeholder="status != '3' ? '请输入' : ''"
								clearable
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="社会信用代码">
							<el-input
								v-model="form.unifiedCreditCode"
								:placeholder="status != '3' ? '请输入' : ''"
								clearable
							/>
						</el-form-item>
					</el-col>
				</el-row>


				<el-row>
					<el-col :span="8">
						<el-form-item label="联系人" prop="contactsName">
							<el-input
								v-model="form.contactsName"
								placeholder="请输入"
								clearable
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="联系电话" prop="contactsMobile">
							<el-input
								v-model="form.contactsMobile"
								placeholder="请输入"
								clearable
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="单位类型">
							<el-select
								v-model="form.organizationType"
								:placeholder="status != '3' ? '请选择' : ''"
								style="width: 100%">
								<el-option
									v-for="item in dict.type.organization_type"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<!-- <el-col :span="8">
						<el-form-item label="剂量计联系人" prop="dosageContactsName">
							<el-input
								v-model="form.dosageContactsName"
								placeholder="请输入"
								clearable
							/>
						</el-form-item>
					</el-col> -->
					<!-- <el-col :span="8">
						<el-form-item label="剂量计联系电话" prop="dosageContactsMobile">
							<el-input
								v-model="form.dosageContactsMobile"
								placeholder="请输入"
								clearable
							/>
						</el-form-item>
					</el-col> -->
					<el-col :span="8">
						<el-form-item label="用户状态">
							<el-select
								v-model="form.userState"
								:placeholder="status != '3' ? '请选择' : ''"
								style="width: 100%">
								<el-option
									v-for="item in dict.type.status_disable"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="检测启用状态">
							<el-select
								v-model="form.detectionState"
								:placeholder="status != '3' ? '请选择' : ''"
								style="width: 100%">
								<el-option
									v-for="item in dict.type.status_disable"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="检测周期(天)">
							<el-input-number
								v-model="form.inspectionCycle"
								:min="0"
								:placeholder="status != '3' ? '请输入' : ''"
								style="width: 100%;"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="电子签章">
							<el-select
								v-model="form.electronicSeal"
								:placeholder="status != '3' ? '请选择' : ''"
								style="width: 100%">
								<el-option
									v-for="item in dict.type.status_disable"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- <el-row>
					<el-col :span="8">
						<el-form-item label="监测启用状态">
							<el-select
								v-model="form.monitoringState"
								:placeholder="status != '3' ? '请选择' : ''"
								style="width: 100%">
								<el-option
									v-for="item in dict.type.status_disable"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="监测周期(天)">
							<el-input-number
								v-model="form.monitoringCycle"
								:min="0"
								:placeholder="status != '3' ? '请输入' : ''"
								style="width: 100%;"
							/>
						</el-form-item>
					</el-col>
          <el-col :span="8">
						<el-form-item label="本底数">
							<el-input-number
								v-model="form.backgroundCount"
								:min="0"
								:placeholder="status != '3' ? '请输入' : ''"
								style="width: 100%;"
							/>
						</el-form-item>
					</el-col>
				</el-row> -->
				<el-row v-if="status != '3'">
					<!-- <el-col :span="5">
						<el-form-item label="单位地址" prop="provinceCode">
							<el-select
								v-model="form.provinceCode"
								placeholder="省"
								style="width: 100%"
								@change="changeProvince">
								<el-option
									:label="item.label"
									:value="item.id"
									v-for="(item,index) in provinceList"
									:key="index">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
					<!-- <el-col :span="3">
						<el-form-item label="" label-width="10px">
							<el-select
								v-model="form.cityCode"
								placeholder="市"
								style="width: 100%"
								@change="changeCity">
								<el-option
									:label="item.label"
									:value="item.id"
									v-for="(item,index) in cityList"
									:key="index">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
					<!-- <el-col :span="3">
						<el-form-item label="" label-width="10px">
							<el-select
								v-model="form.areaCode"
								placeholder="区县"
								style="width: 100%">
								<el-option
									:label="item.label"
									:value="item.id"
									v-for="(item,index) in areaList"
									:key="index">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
					<el-col :span="24">
						<el-form-item label="单位地址">
							<el-input
								v-model="form.address"
								placeholder="请输入"
								clearable
							/>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="24">
						<el-form-item label="粘贴地址" label-width="120px">
							<el-input
								v-model="form.autoText"
								placeholder="粘贴地址到此处，将自动识别地址信息 例：江苏省南京市玄武区某小区"
								clearable
								@blur="handleAutoRecognize"
							/>
						</el-form-item>
					</el-col> -->
					<el-col :span="8">
						<el-form-item label="经度" prop="">
							<el-input
								v-model="form.lon"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="纬度" prop="">
							<el-input
								v-model="form.lat"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="" label-width="10px">
							<el-button type="primary" @click="handleOpenMap">打开地图</el-button>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-else>
					<el-col :span="8">
						<el-form-item label="单位地址" prop="">
							<el-input
								v-model="form.addressDetails"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="经度" prop="">
							<el-input
								v-model="form.lon"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="纬度" prop="">
							<el-input
								v-model="form.lat"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="图片上传">
							<div class="box">
								<div class="item">
									<div class="uploadname">
										<span>营业执照</span>
										<span>{{imageUrlF ? 1 : 0}}/1</span>
									</div>

									<el-upload
										v-if="status != '3'"
										class="avatar-uploader"
										:class="status == '3' && 'disabledPic'"
										:action="upload.url"
										:headers="upload.headers"
										:show-file-list="false"
										:on-success="handleFileSuccess"
										:before-upload="beforeAvatarUpload">
										<img v-if="imageUrlF" :src="imageUrlF" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>

									<el-image
										v-if="status == '3'"
										:src="imageUrlF"
										:preview-src-list="[imageUrlF]">
										<div slot="error" class="image-slot">
											<i class="el-icon-picture-outline"></i>
										</div>
									</el-image>
								</div>

								<div class="item">
									<div class="uploadname">
										<span>医疗机构执业许可证</span>
										<span>{{imageUrlS ? 1 : 0}}/1</span>
									</div>
									<el-upload
										v-if="status != '3'"
										class="avatar-uploader"
										:class="status == '3' && 'disabledPic'"
										:action="upload.url"
										:headers="upload.headers"
										:show-file-list="false"
										:on-success="handleFileSuccessSecond"
										:before-upload="beforeAvatarUpload">
										<img v-if="imageUrlS" :src="imageUrlS" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>

									<el-image
										v-if="status == '3'"
										:src="imageUrlS"
										:preview-src-list="[imageUrlS]">
										<div slot="error" class="image-slot">
											<i class="el-icon-picture-outline"></i>
										</div>
									</el-image>
								</div>

								<div class="item">
									<div class="uploadname">
										<span>放射诊疗许可证</span>
										<span>{{imageUrlT ? 1 : 0}}/1</span>
									</div>
									<el-upload
										v-if="status != '3'"
										class="avatar-uploader"
										:class="status == '3' && 'disabledPic'"
										:action="upload.url"
										:headers="upload.headers"
										:show-file-list="false"
										:on-success="handleFileSuccessThird"
										:before-upload="beforeAvatarUpload">
										<img v-if="imageUrlT" :src="imageUrlT" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>

									<el-image
										v-if="status == '3'"
										:src="imageUrlT"
										:preview-src-list="[imageUrlT]">
										<div slot="error" class="image-slot">
											<i class="el-icon-picture-outline"></i>
										</div>
									</el-image>
								</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="备注">
							<el-input
								type="textarea"
								rows="3"
								maxlength="100"
								show-word-limit
								v-model="form.remark"
								:placeholder="(status != '3') && '请输入单位特殊信息，如：针对放射诊疗单位，需填写采集单位的放射装置信息、放射工作人员信息等'"
								clearable
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div slot="footer">
				<el-button type="primary" @click="submitForm" v-if="status != '3'">确 定</el-button>
				<el-button @click="dialogVisible = false">取 消</el-button>
			</div>
		</el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body v-dialogDrag="true">
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
		<search-map ref="searchMapRefs" @confirm="handleConfirmMap" />
	</div>
</template>

<script>
import { entrustOrganizationList, entrustOrganizationExport, entrustOrganizationDetail,
	entrustOrganizationAdd, entrustOrganizationEdit, entrustOrganizationDelete, getUnitNumber, addressResolution, fuzzySearch } from "@/api/person/entrustOrganization";
import { areaList, areadeptTree, getInfoarea } from "@/api/area";
import { listOss, listByIds, delOss } from "@/api/system/oss";
import { getToken } from "@/utils/auth";
import SearchMap from "./components/SearchMap.vue";

export default {
	components: { SearchMap },
  dicts: ['status_disable', 'organization_type'],
  data() {
    return {
      dialogVisible: false,
      status: null,
      title: null,
			form: {
				delegationOrganizationName: '',
				userState: '0',
				electronicSeal: '0',
				backgroundCount: 1
			},
      rules: {
        unitNumber: [
          { required: false, message: "单位编号不能为空", trigger: "blur" },
        ],
        organizationName: [
          { required: true, message: "单位名称不能为空", trigger: "blur" },
        ],
        provinceCode: [
          { required: false, message: "单位地址不能为空", trigger: "blur" },
        ],
        contactsName: [
          { required: false, message: "联系人不能为空", trigger: "blur" },
        ],
        contactsMobile: [
          { required: false, message: "联系电话不能为空", trigger: "blur" },
					{
            pattern: /(^\d{3,4}-\d{7,8}(-\d{3,4})?$)|(^1[3|4|5|6|7|8|9][0-9]\d{8}$)/,
            message: "请输入正确的固定电话或手机号",
            trigger: "blur"
          }
        ],
        dosageContactsMobile: [
					{
            pattern: /(^\d{3,4}-\d{7,8}(-\d{3,4})?$)|(^1[3|4|5|6|7|8|9][0-9]\d{8}$)/,
            message: "请输入正确的固定电话或手机号",
            trigger: "blur"
          }
        ],
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
          'Content-Disposition': 'inline'
        },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/oss/upload"
      },
			imageUrlF: '',
			imageUrlS: '',
			imageUrlT: '',
			visibleImg: false,
			dialogImageUrl: "",
			// 省列表
			provinceList: [],
			// 市列表
			cityList: [],
			// 区县列表
			areaList: [],
      organizationOptions: [],
      hasQCCheck: false,
    };
  },
  created() {
		// 获取省
		this.getProvinceList();

  },
  methods: {
		handleAutoRecognize(e) {
			const val = e.target.value
			if (!val) return
			addressResolution({
				organizationAddress: val
			}).then(res => {
				if (!res.data) {
					this.$modal.msgWarning("地址错误，请重新粘贴地址或手动选择单位地址");
					return
				}

				if (res.data.provinceCode) {
					this.form.provinceCode = res.data.provinceCode
					this.changeProvince(res.data.provinceCode, true);
				}
				if (res.data.cityCode) {
					this.form.cityCode = res.data.cityCode
					this.changeCity(res.data.cityCode, true);
				}
				this.form.areaCode = res.data.areaCode
				this.form.address = res.data.address
			})
		},
		// 获取省列表
    getProvinceList() {
      areaList().then(response => {
				this.provinceList = response.data;
			}).catch(response => {

			});
    },
		// 更改省
    changeProvince(val, isview) {
			console.log("val", val);
			if (!isview) {
				this.$set(this.form, "cityCode", null);
				this.$set(this.form, "areaCode", null);
			}
			this.cityList = [];
			this.areaList = [];
      areaList({parentId: val}).then(response => {
				this.cityList = response.data;
			}).catch(response => {

			});
    },
		// 更改市
    changeCity(val, isview) {
			console.log("val", val);
			if (!isview) {
				this.$set(this.form, "areaCode", null);
			}
			this.areaList = [];
      areaList({parentId: val}).then(response => {
				this.areaList = response.data;
			}).catch(response => {

			});

      // 计算市编号
      // val && this.status == "1" && getUnitNumber({
      //   cityName: this.cityList.find(i => i.id == val)?.label || ''
      // }).then((response) => {
      //   this.$set(this.form, "unitNumber", response.msg)
      // });
    },
		handleOpenMap() {
			this.$refs.searchMapRefs.openDialog({
				address: this.form.addressDetails,
				lnglat: [this.form.lon, this.form.lat]
			})
		},
    // 打开对话框
    openDialog(row, status) {
			this.resetFormmy();
			if(row) {
				entrustOrganizationDetail(row.entrustOrganizationId).then((response) => {
					this.form = response.data;
					if (status != "3") {
						if (this.form.provinceCode) {
							this.changeProvince(this.form.provinceCode, true);
						}
						if (this.form.cityCode) {
							this.changeCity(this.form.cityCode, true);
						}
					}
					// 根据ossId查询图片url
					if (this.form.businessLicenseOssId) {
						listByIds(this.form.businessLicenseOssId).then((response) => {
							this.imageUrlF = response.data[0] && response.data[0].url;
						});
					}
					// 根据ossId查询图片url
					if (this.form.medicalInstitutionOssId) {
						listByIds(this.form.medicalInstitutionOssId).then((response) => {
							this.imageUrlS = response.data[0] && response.data[0].url;
						});
					}
					// 根据ossId查询图片url
					if (this.form.radiateRadiotherapyOssId) {
						listByIds(this.form.radiateRadiotherapyOssId).then((response) => {
							this.imageUrlT = response.data[0] && response.data[0].url;
						});
					}

					this.dialogVisible = true;
				});
				if (status == "3") {
					this.status = "3";
					this.title = "查看单位";
				}else {
					this.status = "2";
					this.title = "编辑单位";
				}
			}else {
				this.status = "1";
				this.title = "添加单位";
				// getUnitNumber().then((response) => {
				// 	this.$set(this.form, "unitNumber", response.msg)
				// });
        // 默认省为北京市
        this.form.provinceCode = 110000
        this.changeProvince(this.form.provinceCode, true);

				this.$set(this.form, "detectionState", "0");
				this.$set(this.form, "monitoringState", "0");
				this.dialogVisible = true;
			}

    },
		// 重置表单
		resetFormmy() {
			// console.log(this.$options)
			// this.$set(this, 'form', this.$options.data().form)
			this.form = {
				delegationOrganizationName: '',
				userState: '0',
				electronicSeal: '0',
				backgroundCount: 1
			};
			this.resetForm("form");
			this.cityList = [];
			this.areaList = [];
			this.imageUrlF = '';
			this.imageUrlS = '';
			this.imageUrlT = '';
      this.hasQCCheck = false;
		},
    // 提交按钮
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) return;
        if (this.status == "1") {
          entrustOrganizationAdd(this.form).then((response) => {
            this.$modal.msgSuccess("新增成功");
            this.dialogVisible = false;
            this.$emit("getList");
          });
        } else if (this.status == "2") {
          entrustOrganizationEdit(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.dialogVisible = false;
            this.$emit("getList");
          });
        }
      });
    },
		handleConfirmMap(value) {
			console.log(value);
			this.form.lon = value[0]
			this.form.lat = value[1]
		},
    /** 下载模板操作 */
    importTemplate() {
      this.download('system/user/importTemplate', {
      }, `user_template_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
			console.log("response, file", response, file);
			if (response.data) {
				this.imageUrlF = URL.createObjectURL(file.raw);
				this.form.businessLicenseOssId = response.data.ossId;
			}
    },
    // 文件上传成功处理
    handleFileSuccessSecond(response, file, fileList) {
			console.log("response, file", response, file);
			if (response.data) {
				this.imageUrlS = URL.createObjectURL(file.raw);
				this.form.medicalInstitutionOssId = response.data.ossId;
			}
    },
    // 文件上传成功处理
    handleFileSuccessThird(response, file, fileList) {
			console.log("response, file", response, file);
			if (response.data) {
				this.imageUrlT = URL.createObjectURL(file.raw);
				this.form.radiateRadiotherapyOssId = response.data.ossId;
			}
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
		// 上传前
		beforeAvatarUpload(file) {
			console.log("file", file);
			let myisJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
			if (!myisJPG) {
				this.$message.warning('图片仅支持jpg/png格式，请重新上传!');
			}
			return myisJPG;
		},
    triggerRemoteSearch() {
      this.remoteSearchOrganization(this.form.organizationName);
    },
    // handleRemoveOrganization() {
    //   this.$set(this.form, 'organizationName', '');
    //   this.hasQCCheck = false;
    // },
    async remoteSearchOrganization(query) {
      if (query) {
        fuzzySearch({ searchKey: query }).then(res => {
          this.hasQCCheck = true;
          this.organizationOptions = res.data.result;
          this.$nextTick(() => {
            this.$refs.companySelect && this.$refs.companySelect.focus();
          });
        });
      } else {
        this.organizationOptions = [];
      }
    },
    handleOrganizationChange(value) {
      const selectedItem = this.organizationOptions.find(item => item.keyNo === value);
      if (selectedItem) {
        this.$set(this.form, 'delegationOrganizationName', selectedItem.name);
        this.$set(this.form, 'unifiedCreditCode', selectedItem.creditCode);
        this.$set(this.form, 'legalRepresentative', selectedItem.operName);
        this.$set(this.form, 'address', selectedItem.address);
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.title {
	padding-left: 10px;
	border-left: 5px solid #2A72EE;
	text-align: left;
	font-weight: bolder;
	font-size: 16px;
	margin-bottom: 30px;
}
.myimage {
	width: 100%;
	height: 100%;
}
.box {
	border: 1px solid #dfdfdf;
	border-radius: 5px;
	min-height: 100px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	.item {
		display: flex;
    flex-direction: column;
		width: 179px;
    height: 223px;
		padding-bottom: 10px;
		.uploadname {
			display: flex;
			justify-content: space-between;
			padding: 0 5px;
		}
		.el-image {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.avatar-uploader ::v-deep .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
::v-deep .el-textarea__inner {
	resize: none;
}
.disabledPic {
	.el-icon-plus {
		visibility: hidden;
	}
	::v-deep .el-upload {
		cursor: not-allowed;
	}
}
::v-deep .el-form {
	margin-left: -23px;
}
.qcc {
  width: 20px;
  height: 20px;
}
</style>
